/*
 * @Author: your name
 * @Date: 2022-03-30 09:42:11
 * @LastEditTime: 2022-04-11 16:14:37
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \四阶段项目\erp-management-system\src\views\work\work.jsx
 */
import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import './work.css';
import { Table, Button, Select, Tag, Pagination, ConfigProvider } from 'antd'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import zhCN from 'antd/lib/locale/zh_CN';
import axios from '../../../utils/myAxios'
const Work = () => {
  const navigate = useNavigate();
  const { Option } = Select;
  const [dataSource, setDataSource] = useState()
  const searchData = useRef()
  //分页
  const [pageConcent, setpageConcent] = useState(1);
  const [pageTotal, setpageTotal] = useState();
  //生命钩子
  useEffect(() => {
    // console.log('page', pageConcent);
    axios.get('/anno/selectForPage', {
      params: {
        page: pageConcent
      }
    })
      .then((res) => {
        // console.log('res', res);
        const { data } = res
        if (data.code === 0) {
          const getPage = data.count
          const initDtaList = data.data.map(item => {
            item['key'] = item.id
            return item
          })
          setDataSource(initDtaList)
          setpageTotal(getPage)
          // console.log(initDtaList);
        }

      })
    return () => {

    };
  }, [pageConcent]);

  //表格初始数据

  //表格渲染
  const columns = [
    {
      title: '阅读',
      dataIndex: 'read',
      key: 'read1',
      render: text => {
        if (text === '已读') {
          return <span style={{ color: "red" }}>已读</span>
        } else {
          return <span style={{ color: "green" }}>未读</span>
        }
      }
    },
    {
      title: '分类',
      dataIndex: 'type',
      key: '1',
      render: type => {

        switch (type) {
          case 0:
            return <span>工作心得</span>
          case 1:
            return <span>日报</span>
          case 2:
            return <span>周报</span>
          case 3:
            return <span>月报</span>
          case 4:
            return <span>季报</span>
          case 5:
            return <span>年报</span>
        }

      }
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: '2',
      render: title => {
        return <span>{title}</span>
      }
    },
    {
      title: '提交人',
      dataIndex: 'employeeName',
      key: '3',
      render: employeeName => {
        return <span>{employeeName}</span>
      }
    },
    {
      title: '提交时间',
      dataIndex: 'reporttime',
      key: '4',
      render: reporttime => {
        return <span>{reporttime}</span>
      }
    },
    {
      title: '接收人',
      dataIndex: 'contacts',
      key: '5',
      render: contacts => {
        return <span>{contacts}</span>
      }
    },
    {
      title: '管理',
      key: 'receiver',
      render: data => {
        return <>
          <Tag icon={<EditOutlined />} color="#87d068" onClick={() => endorsed(data)}>批注</Tag>
          <Tag icon={<DeleteOutlined />} color="#cd201f" onClick={() => delte(data)}>
            删除
          </Tag>
        </>
      }
    }

  ]

  const changeState = (v) => {
    // console.log(v);
  }

  //搜索
  const onSearch = () => {
    // console.log(dataSource);
  }
  //批注
  const endorsed = (data) => {
    console.log(data);
    const { title, reporttime, type, content } = data
    navigate('/other/workreport/endorse/', {
      state: {
        title,
        reporttime,
        type,
        content
      }
    })
  }

  //删除
  const delte = (data) => {
    const id = data.id
    console.log(id);
    //删除文件
    axios.post(`/anno/deleteById?id=${id}`)
      .then(res => {
        //重新请求数据
        axios.get('/anno/selectAll')
          .then((res) => {
            const { data } = res

            if (data.code === 200) {
              console.log(data.data);
              const initDtaList = data.data.map(item => {
                item['key'] = item.id
                return item
              })
              setDataSource(initDtaList)
              console.log(initDtaList);
            }

          })
      })
  }


  //写报告
  const wrtingFn = () => {

    navigate('/other/workreport/writing')
  }

  //分类搜索
  const changeClass = (e) => {
    console.log(e);
  }
  //分页查询
  const pageOnChange = (page) => {
    console.log(page);
    setpageConcent(page)
  }

  //页面挂载
  return (
    <>
      <div className='work-container'>
        <div className='tab-search' >
          <span>
            <span style={{ display: 'line-block', paddingLeft: '30px' }}>阅读状态：</span>
            <Select style={{ width: '10%', margin: '0 20px' }} defaultValue="re1" onChange={changeState}>
              <Option value="re1" disabled>--请选择--</Option>
              <Option value="已读" >已读</Option>
              <Option value="未读">未读</Option>
            </Select>
          </span>
          <span>
            <span style={{ display: 'line-block', paddingLeft: '20px' }}>分类：</span>
            <Select style={{ width: '10%', margin: '0 20px' }} defaultValue="cl1" onChange={changeClass}>
              <Option value="cl1" disabled>--请选择--</Option>
              <Option value="日报">日报</Option>
              <Option value="周报">周报</Option>
              <Option value="月报">月报</Option>
              <Option value="季报">季报</Option>
            </Select>
          </span>


          <Button icon={<PlusOutlined />} type="primary" onClick={onSearch} className='top-search'>搜索</Button>
          <Button icon={<PlusOutlined />} type="primary" onClick={wrtingFn}>写报告</Button>

        </div>

        <Table dataSource={dataSource} columns={columns} pagination={false} />

        <ConfigProvider locale={zhCN}>
          <Pagination
            total={pageTotal}
            showQuickJumper
            showTotal={total => `总数 ${total} 条`}
            onChange={pageOnChange}
          />
        </ConfigProvider>

      </div>

    </>

  )
}

export default Work;
